<template>
  <div v-loading="pageLoading" class="main-page withdrawalSetting">
    <el-form
      ref="baseForm"
      :model="formData"
      label-suffix=":"
      label-width="130px"
      :rules="rules"
    >
      <el-form-item label="提现开关" prop="enable" class="input-number">
        <el-switch v-model="formData.enable">
        </el-switch>
      </el-form-item>
      <el-form-item
        label="最小提现金额"
        prop="minimumAmount"
        class="input-number"
      >
        <el-input
          v-model="formData.minimumAmount"
          type="number"
          placeholder="请输入最小提现金额"
        >
          <template slot="append">
            元
          </template>
        </el-input>
      </el-form-item>
      <el-form-item
        label="最大提现金额"
        prop="maximumAmount"
        class="input-number"
      >
        <el-input
          v-model="formData.maximumAmount"
          type="number"
          placeholder="请输入最大提现金额"
        >
          <template slot="append">
            元
          </template>
        </el-input>
      </el-form-item>
      <el-form-item label="每日提现次数" prop="userMost" class="input-number">
        <el-input
          v-model="formData.userMost"
          type="number"
          placeholder="请输入每日提现次数"
        >
          <template slot="append">
            元
          </template>
        </el-input>
      </el-form-item>
      <el-form-item
        label="最大提现总金额"
        prop="totalAmount"
        class="input-number"
      >
        <el-input
          v-model="formData.totalAmount"
          type="number"
          placeholder="请输入最大提现总金额"
        >
          <template slot="append">
            元
          </template>
        </el-input>
      </el-form-item>
      <el-form-item label="税点" prop="tax" class="input-number">
        <el-input
          v-model="formData.tax"
          style="width: 100%"
          placeholder="请输入税点"
        >
          <template slot="append">
            %
          </template>
        </el-input>
      </el-form-item>

      <el-row type="flex" justify="center" class="btn">
        <el-button
          :loading="btnLoading"
          type="primary"
          @click="updateWithdrawalSetting"
        >
          保存
        </el-button>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import {
  fetchWithdrawalSetting,
  fetchUpdateWithdrawalSetting,
} from "@/api/withdrawal";
export default {
  name: "WithdrawalSetting",
  data() {
    //不能为负数
    const validateNumber = (rule, value, callback) => {
      if (value < 0) {
        callback(new Error("不能为负数"));
      } else {
        callback();
      }
    };
    return {
      pageLoading: false,
      btnLoading: false,
      formData: {
        enable: false, // 提现开关
        minimumAmount: 0, //最小提现金额
        maximumAmount: 0, //最大提现金额
        totalAmount: 0, //最大提现总金额
        userMost: 0, //每日提现次数
        tax: 0, //税点
      },
      rules: {
        minimumAmount: [
          {
            required: true,
            message: "请输入最小提现金额",
            trigger: "blur",
          },
          { validator: validateNumber, trigger: "blur" },
        ],
        maximumAmount: [
          {
            required: true,
            message: "请输入最大提现金额",
            trigger: "blur",
          },
          { validator: validateNumber, trigger: "blur" },
        ],
        totalAmount: [
          {
            required: true,
            message: "请输入最大提现总金额",
            trigger: "blur",
          },
          { validator: validateNumber, trigger: "blur" },
        ],
        userMost: [
          {
            required: true,
            message: "请输入每日提现次数",
            trigger: "blur",
          },
          { validator: validateNumber, trigger: "blur" },
        ],
        tax: [
          {
            required: true,
            message: "请输入税点",
            trigger: "blur",
          },
          {
            validator: (rule, value, callback) => {
              if (value < 0 || value > 100) {
                callback(new Error("请输入0-100的数字"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    this.getWithdrawalSetting();
  },
  methods: {
    getWithdrawalSetting() {
      this.pageLoading = true;
      fetchWithdrawalSetting()
        .then((res) => {
          this.formData = res.data;
        })
        .finally(() => {
          this.pageLoading = false;
        });
    },
    updateWithdrawalSetting() {
      this.$refs.baseForm.validate((valid) => {
        if (valid) {
          this.btnLoading = true;
          fetchUpdateWithdrawalSetting(this.formData)
            .then(() => {
              this.$message.success("保存成功");
              this.getWithdrawalSetting();
            })
            .finally(() => {
              this.btnLoading = false;
            });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.withdrawalSetting {
  margin: 16px 0 0 60px;
  padding-top: 16px;
  .input-number {
    width: 500px;
  }
  .btn {
    width: 500px;
    button {
      margin-left: 120px;
      width: 300px;
    }
  }
}
</style>
